<template>
  <view class="conten statusbar-height">
     <top-tabbar :tabTitle="tabTitle" v-if="fromPary.platform" :titleStatus="tabHeader" :class="tabHeader ? '' : 'tabHeaderBack'"  @click="backClick"></top-tabbar>
    <!-- 体验课与试听课 -->
    <view class="audition" :class="fromPary.platform? 'platformBackg': ''">
        <view class="experience">
         <view class="experImg" v-for="(item,index) in courseList" :key="index">
           <image :src="item.imgUrl" mode="widthFix"></image>
         </view>
        </view>
        <view class="footer" v-if="courseList.length">
          <view class="btnget" @click="promptlyGet">立即领取</view>
        </view>
        <!-- 提示输入手机号码弹窗 -->
  <!--      <uni-popup ref="popupphone" type="center" @change="phoneChange">
          <view class="popup-phone-box">
           <view class="popuo-phone-main">
             <view class="hint-title">请输入手机号码：</view>
             <input class="phone-input" v-model="fromPary.phone" type="digit" :maxlength="11"/>
             <view class="btn-primary" @click="phoneClick"><span>立即领取</span></view>
             <view class="close" @click="$refs.popupphone.close()">关闭</view>
           </view>
          </view>
        </uni-popup> -->
        <!-- 倒计时 -->
        <view class="count-down" v-if="dateTimeEnd && courseList.length">
          <view class="iconfont-time">
            <image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/Time.png"></image>
          </view>
          <view class="time-tiltle">活动价倒计时</view>
          <view class="postion-time">{{countDown.day+'天 '+ countDown.time+':'+countDown.minute+':'+countDown.second }}</view>
        </view>
      <!-- 挽留弹窗 -->
      <detaim-loding ref="detaimPopup" @affirmClick="openOrder"></detaim-loding>
    </view>
  </view>
</template>

<script>
  import topTabbar from '@/components/topTabbar/index.vue'
  import { $POST, $GET, squeezePage, buyClass } from '@/utils/api.js'
  import detaimLoding from '@/components/loding/detaimLoding.vue'
  import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue'
  import luoButton from '../../components/botton/luo-botton.vue'
  import launchWeapp from '@/components/subscribe/launchWeapp.vue' // 跳小程序组件
  export default {
    components: { 
      topTabbar, 
      detaimLoding, 
      easyLoadimage,
      luoButton,
      launchWeapp
    },
  	data() {
  		return {
        tabTitle:'', // 标题
        tabHeader: true, // 顶部标题状态
        countdownState: true, // 倒计时状态
        dateTimeEnd: '', // 结束时间
        startTime: '', // 开始时间
        pathUrl: '', // 地址参数
        courseId:'', // 体验课id：a368d592-3f65-b9af-04ac-3a00150f4e72，// 系统课id:444e80df-20f1-17d2-7d5a-3a0016483644
        fromPary: { // 回显的参数
          phone:'', // 手机号码
          skuId: '', // skuiD
          radid: '' , // 需要传给支付渠道id
          rsid: '', // 子渠道id
          platform: '' ,// 客户端app所属平台
          audstate: false, // 审核状态
        },
        regPhone: /^[1][3,4,5,6,7,8,9][0-9]{9}$/, // 手机正则
        phoneNum: '', // 绑定的手机号码
        courseList: [], // 课程数据
        timer: null, //重复执行
        countDown: {
          day: 0,
          time: 0,
          minute: 0,
          second: 0,
        } 
      }
    },
    onPageScroll({scrollTop}) {
      // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
      if(scrollTop < 50) {
         this.tabHeader = true
      }
      if(scrollTop> 50){
        this.tabHeader = false
      }
    },
    mounted() {},
    onLoad(params) {
      const vm = this
      // 微信环境下获取openid与分享配置
      if(vm.$wechat.isWechat()){
        if(vm.$auth.getUrlPrams("code")){
          vm.$auth.init()
          setTimeout(() => {
            vm.junmPay(vm.fromPary.phone)
          },1000)
        }
      }
      vm.pathUrl = window.location.href.split('?')[1]
      if(vm.$auth.getUrlPrams("phonenumber")) {
        vm.fromPary.phone = vm.$auth.getUrlPrams("phonenumber")
      }
      if(vm.$auth.getUrlPrams("skuid")){
        vm.fromPary.skuId = vm.$auth.getUrlPrams("skuid")
      }
      if(vm.$auth.getUrlPrams("platform")) {
        vm.fromPary.platform = vm.$auth.getUrlPrams("platform").toLowerCase() // 转小写
      }
      if(vm.$auth.getUrlPrams("audstate")){
        let audsteatStr = vm.$auth.getUrlPrams("audstate").toLowerCase()
         vm.fromPary.audstate = audsteatStr === 'true' ? true : false
      }
      vm.getDetail()
       vm.$wechat.unseBehavior()
    },
    methods:{
      /* 
        countdownState为flase说明活动结束，跳活动结束
        vm.fromPary.audstate为true，vm.fromPary.platform === 'ios'
        是ios审核进来的，需要跳内购支付
      */
      promptlyGet() {
        const vm = this
        if(!vm.countdownState){
         uni.navigateTo({
           url: '/pages/product/activitypage?'+vm.pathUrl
         })
          return
        }
        if(vm.$wechat.isEnterprise()){
          vm.junmPay(vm.fromPary.phone)
          return;
        }
        if(vm.$wechat.isWechat()){
          const openId = uni.getStorageSync('openId')
          if(!openId){
            vm.$auth.init()
          }else{
            vm.junmPay(vm.fromPary.phone)
          } 
        }else{
          vm.junmPay(vm.fromPary.phone)
        }
      },
      // 跳支付页
      junmPay(phone) {
        const vm = this
        uni.navigateTo({
          url: '/pages/my/order/payment?phone='+phone+'&'+vm.pathUrl,
            success:(res)=>{
              if(res.errMsg == 'navigateTo:ok'){
                if(vm.$wechat.isWechat()){
                  window.location.reload ( true ) 
                }
              }
            }
        }) 
      },
      // 获取详情
      async getDetail() {
        const vm = this
        const detailRes = await squeezePage(vm.fromPary.skuId)
          if(detailRes.dateTimeEnd) {
            vm.dateTimeEnd = new Date(detailRes.dateTimeEnd).getTime()
            console.log('结束时间',new Date(detailRes.dateTimeEnd))
          }
          if(detailRes.dateTimeStart){
             vm.startTime = new Date(detailRes.dateTimeStart).getTime()
          }
          let endtimes = new Date(vm.dateTimeEnd).getTime() // 结束时间
          let creation =  new Date(vm.startTime).getTime() // 开始时间
          let present = parseInt(new Date().getTime())  //获取当前时间
          if(present < creation){ // 还没开始
            uni.navigateTo({
              url: '/pages/product/activitypage'
            })
            return
          }
          if(present > endtimes) { // 已经结束
            uni.navigateTo({
              url: '/pages/product/activitypage'
            })
            return
          }
          vm.courseList = detailRes.coverImageUrls.map(item => ({imgUrl:item}))
          vm.tabTitle = detailRes.name
          vm.timer = setInterval(()=>{
            vm.showtime(vm.dateTimeEnd,vm.startTime)
          },1000)
      },
      // 倒计时
      showtime(time,startTime) {
        const vm = this
        let starTime = new Date(startTime).getTime() // 开始时间
        let endtime  = new Date(time).getTime() // 结束时间
        let nowtime = parseInt(new Date().getTime()) //获取当前时间
        let lefttime = endtime - nowtime
        let leftd = Math.floor(lefttime/(1000*60*60*24)) //计算天数
        let lefth = Math.floor(lefttime/(1000*60*60)%24) //计算小时数
        let leftm = Math.floor(lefttime/(1000*60)%60) //计算分钟数
        let lefts = Math.floor(lefttime/1000%60)  //计算秒数
        vm.countDown.day =  leftd;//返回天 
        vm.countDown.time = lefth;//返回时
        vm.countDown.minute = leftm;//返回分
        vm.countDown.second = lefts;//返回秒
        if(nowtime < starTime || nowtime > endtime){
          vm.countDown.day = 0
          vm.countDown.time = 0
          vm.countDown.minute = 0
          vm.countDown.second = 0
          vm.countdownState = false
          clearInterval(vm.timer)
        }
      },
      // 挽留弹窗
      openOrder() {
        const vm = this
        vm.$refs.detaimPopup.getPopupConcal()
        let loadingPhone = JSON.parse(JSON.stringify(vm.fromPary.phone))
        vm.fromPary.phone = ''
        uni.navigateTo({
          url: '/pages/my/order/payment?phone='+loadingPhone+'&skuid='+vm.courseId+'&'+vm.pathUrl
        }) 
      },
      // 返回上一页
      backClick() {
        uni.navigateBack({})
      }
    }
  }
</script>

<style lang="scss" scoped>
  image{
    width: 100%;
    height: 100%;
    vertical-align:bottom;
  }
 /deep/ .top-tabbar-wrap{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background: #FFFFFF;
  }
  .tabHeaderBack{
    background: rgba(0,0,0,0.3);
  }
  .platformBackg{
     margin-top: 176rpx;
  }
  .experience{
    padding-bottom: 120rpx;
    .experImg{
      width: 100%;
      display: flex;
      flex-direction: column;
    }
    /* mode为widthFix即图片高度自适应时要设置占位图默认高度 */
    /deep/ .loading-img{
      height: 500rpx;
    }
  }
  .footer{
    width: 750rpx;
    height: 120rpx;
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(20rpx);
    -webkit-backdrop-filter: blur(20rpx);
    -moz-backdrop-filter: blur(20rpx);
    -ms-backdrop-filter: blur(20rpx);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: env(safe-area-inset-bottom);
    .btnget{
       width: 680rpx;
       padding: 6rpx 0;
       border-radius: 44rpx;
       font-weight: bold;
       background: #FF800C;
       font-weight: bold;
       font-size: 48rpx;
       text-align: center;
       color: #FFFFFF;
       letter-spacing: 0.2em;
       animation-fill-mode: both;
       animation: btnget 1s infinite 1s;
    }
     @keyframes btnget {
        0% { transform: scale(1,1);}
        50% { transform: scale(0.97,0.97);}        
        100% { transform: scale(1,1);}
      }
  }
  // 提示手机号码弹窗
  .popup-phone-box{
    width: 670rpx;
    height: 472rpx;
    background: #FFFFFF;
    border-radius: 40rpx;
    .popuo-phone-main{
      padding: 70rpx 48rpx 56rpx 48rpx;
      .hint-title{
        font-size: 32rpx;
        color: #FF800C;
      }
      .phone-input{
        width: 100%;
        height: 72rpx;
        border: 2rpx solid  #FFDAB9;
        border-radius: 36rpx;
        margin: 46rpx 0 76rpx 0;
        padding-left: 48rpx;
        box-sizing: border-box;
        color: #FF800C;
        font-weight: bold;
        font-size: 32rpx;
      }
      .btn-primary{
          width: 100%;
          padding: 16rpx 0;
          background: #FF800C;
          text-align: center;
          margin: auto;
          font-size: 28rpx;
          letter-spacing: 4rpx;
          border-radius: 36rpx;
          font-weight: bold;
          color: #FFFFFF;
      } 
        .close{
          font-size: 20rpx;
          text-align: center;
          color: #8C8C8C;
          margin-top: 16rpx;
        }
    }
  }
  // 倒计时
  .count-down{
    width: 200rpx;
    height: 200rpx;
    // border: 4rpx solid rgba(255,255,255,0.4);
    // padding: 10rpx;
    text-align: center;
    border-radius: 50%;
    background: #FFFFFF;
    // box-shadow: 0 0 0 6rpx rgba(255,255,255,0.4);
    box-shadow: 0 0 6rpx rgba(0,0,0,0.16);
    position: fixed;
    bottom: 200rpx;
    right: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .iconfont-time{
      width: 68rpx;
      height: 68rpx;
    }
    .time-tiltle{
      font-weight: bold;
      font-size: 20rpx;
    }
    .postion-time{
      color: #FF2012;
      font-weight: bold;
      font-size: 24rpx;
    }
  }
</style>
